<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Index-首页</title>

    <link rel="shortcut icon" href="assets/icon/favicon-64.ico" type="image/x-icon">
    <link rel="icon" href="assets/icon/favicon.png" sizes="16x16" type="image/png">

    <meta name="robots" content="index,follow">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"
            integrity="sha256-9uAoNWHdszsUDhSXf/rVcWOqKPfi5/8V5R4UdbZle2A=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"
            integrity="sha256-nwhzW/P9gnvWMPOm84MK8BzQRRMdi8iutxMuYsYcOgw=" crossorigin="anonymous"></script>
    <![endif]-->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/prefixfree@1.0.0/prefixfree.min.js"
            integrity="sha256-a1jYldRqTzpGqk63nmXXjh/zPYp7Sjxp9iUYhNbYPXI="
            crossorigin="anonymous"></script>
</head>

<body>
<h1>Hello Index</h1>
<div id="app">
    <button v-on:click="sayHello">say hello</button>
    <button v-on:click="getUser">get user</button>
    <button v-on:click="listUser">list user</button>
    <button v-on:click="sendUser">send user</button>
    <div>{{msg}}</div>
    <ul v-if="user!=null">
        <li>id：{{user.id}}</li>
        <li>name：{{user.name}}</li>
        <li>password：{{user.password}}</li>
        <li>date：{{user.date}}</li>
    </ul>
    <table v-if="users!=null" border="1">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>password</th>
            <th>date</th>
        </tr>
        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
            <td>{{user.date}}</td>
        </tr>
    </table>
</div>

<script src="assets/lib/vue/vue.js" charset="utf-8"></script>
<script src="assets/lib/axios/axios.js" charset="utf-8"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: null,
            user: null,
            users: null
        },
        methods: {
            sayHello: function () {
                axios.post('hello/say')
                    .then(response => {
                        this.msg = response.data;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            getUser: function () {
                axios.get('user/get')
                    .then(response => {
                        this.user = response.data;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            sendUser: function () {
                axios.post('user/post', {
                    id: 2,
                    name: "小红",
                    password: "aaabbb",
                    date: "2020/03/21"
                })
                    .then(() => {
                        this.msg = "发送成功！！请查看后台";
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            listUser: function () {
                axios.get('user/list')
                    .then(response => {
                        this.users = response.data;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            }
        }
    });
</script>
</body>
</html>
